<template>
  <view class="StartupPage flex-y-around flex-x-between-center">
    <view class="self-difination" v-if="splashScreen.type === 1">
      <image
        :src="fileUrl + splashScreen.img"
        mode="heightFix"
        class="image-total-screen"
        quality="95"
      />
    </view>
    <view class="title-modelcolCA" v-else>
      <view class="title-model-content flex-y-around flex-x-between-center">
        <!-- <view style="width:100%" class="header-image colCA" v-if="{{isMember}}">
            <open-data type="userAvatarUrl" class="_open-data header-image"></open-data>
        </view> -->
        <view class="content-text">
          <view class="_h2">{{ showDate }}</view>
          <view class="_h3">{{ splashScreen.text }}</view>
        </view>
        <!-- <kd-img width="200rpx" cdn="{{true}}" src="/wxapp/static/posterAndShare/icon_smile.png" img-class="smile-icon" v-if="{{!isMember}}"></kd-img> -->
      </view>
      <view class="title-model-button flexCS">
        <image :src="businessLogo" class="item-icon" />
        <!--        <view class="_h4">哈哈生活圈</view>-->
        <view class="_h4">{{ businessName }}</view>
      </view>
    </view>
    <view
      class="count-down flex-x-center-center"
      @click="skipTime"
      v-if="splashScreen.skip && countDownTime >= 0"
    >
      跳过（{{ countDownTime }}s)
    </view>
    <view
      v-else-if="countDownTime >= 0"
      class="count-down flex-x-center-center"
      @click="skipTime"
      style="width: 120rpx"
    >
      {{ countDownTime }}s
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { mapState } from "vuex";
export default {
  name: "index",
  props: {
    isMember: {
      type: Boolean,
      default: false,
    },
    // splashScreen: {
    //   type: Object,
    //   default: () => {
    //     1;
    //   },
    // },
    // countDownTime: {
    //   type: String,
    //   value: ""
    // }
    businessLogo: {
      type: String,
      default: "",
    },
    businessName: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState("sp-common/base", ["appConfig", "innitStartPage"]),
    splashScreen({ appConfig }) {
      return appConfig?.splashScreen || "";
    },
  },
  data() {
    return {
      fileUrl: process.env.VUE_APP_BASE_FileUrl,
      realSrc: "",
      showDate: "",
      countDownTime: -1,
      timerId: null,
      setInter: null,
      hasInitSplashScreen: false,
    };
  },
  watch: {
    splashScreen(splashScreen) {
      // console.log("splashScreen===1", splashScreen);
      if (!splashScreen || this.hasInitSplashScreen) {
        return;
      }
      // console.log("splashScreen===2", splashScreen);
      this.init();
    },
  },
  mounted() {
    if (!this.splashScreen || this.hasInitSplashScreen) {
      // console.log("!mounted==", this.splashScreen.pause);
    } else {
      // console.log("mounted==", this.splashScreen);
      this.init();
    }
    setTimeout(() => {
      if (this.hasInitSplashScreen) {
        return;
      }
      this.ready();
    }, 20000);
  },
  methods: {
    init() {
      let str = "星期" + "日一二三四五六".charAt(new Date().getDay());
      let showDate = dayjs(new Date()).format("YYYY年MM月DD日，") + str;
      this.showDate = showDate;
      let self = this;
      let splashScreen = this.splashScreen;
      this.hasInitSplashScreen = true;
      this.countDownTime = splashScreen.pause;
      // console.log("init==", splashScreen);
      let timerId = setInterval(() => {
        let countDownTime = this.countDownTime;
        if (countDownTime <= 0) {
          this.ready();
        } else {
          self.countDownTime = countDownTime - 1;
        }
      }, 1000);
      this.timerId = timerId;
    },
    skipTime() {
      console.log("跳过");
      console.log("this.splashScreen.skip", this.splashScreen.skip);
      if (this.splashScreen.skip) {
        this.ready();
      }
    },
    ready() {
      if (this.timerId) {
        clearInterval(this.timerId);
        this.timerId = null;
      }
      this.$store.dispatch("sp-common/base/setStartPageInnit"); //vuex的保存字段
      // setTimeout(() => {
      //   this.initLocation(false, false);
      // }, 600);
    },
  },
};
</script>

<style scoped lang="scss">
.StartupPage {
  background-color: #fff;
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1198;
}

.title-model-content {
  .content-text {
    text-align: center;
    width: 80vw;
  }
  //头像logo
  .header-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;
  }
  ._h2 {
    margin-top: 85rpx;
    font-size: 33rpx;
    font-family: xiaowei;
    font-weight: 400;
    color: rgba(1, 1, 1, 1);
    line-height: 48rpx;
  }
  ._h3 {
    margin-top: 40rpx;
    font-size: 33rpx;
    color: rgba(1, 1, 1, 1);
    line-height: 52rpx;
    word-wrap: break-word;
  }
  //微笑的icon
  .smile-icon {
    margin-top: 45rpx;
    width: 98rpx;
    height: 36rpx;
  }
}
/*底部model-button*/
.title-model-button {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -90%);
  z-index: 10;
  .item-icon {
    width: 53rpx;
    height: 53rpx;
    border-radius: 50%;
  }

  ._h4 {
    display: inline;
    margin-left: 29rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
}

.self-difination {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.image-total-screen {
  width: 100vw;
  height: 100vh;
}
.count-down {
  position: absolute;
  width: 213rpx;
  height: 67rpx;
  background: #000000;
  opacity: 0.6;
  border-radius: 33rpx;
  font-size: 31rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  bottom: 80rpx;
  right: 40rpx;
  z-index: 99;
}
</style>
